<script setup lang="ts" name="BettingBill">
import API from "@/api";
import { userinfo } from "@/store";
import { colors } from "@/const/color";
const route = useRoute();
const { t } = useI18n();
const piniaUserinfo: any = userinfo();

const global: any = getCurrentInstance()?.appContext.config.globalProperties;

const props = defineProps({
  actCards: {
    type: Array<any>,
    default: [],
  },
});

const data: any = reactive({
});

const { } = toRefs(data);

const betTotal = computed(() => {
  return props.actCards.map((it) => +it.money)?.reduce((a, b) => a + b, 0);
});

const willBonus = computed(() => {
  let top = props.actCards.map((item) => {
    return {
      ...item,
      ...{
        topMoney: item.money * item.oddsRatio
      }
    }
  }).sort((a, b) => b - a).slice(0, 2);
  return top.map((it:any) => it.topMoney)?.reduce((a, b) => a + b, 0);
});

</script>

<template>
  <div class="bettingBill">
    <div class="billNumber">
      <p>
        {{ t('bet.test66') }}：<span>{{ betTotal }}</span>
      </p>
      <p>
        {{ t('bet.test67') }}：<span>{{ willBonus }}</span>
      </p>
    </div>
    <div class="billList">
      <div class="billItem" v-for="(item, index) in actCards">
        <p class="billIndex">{{ index + 1 }}</p>
        <div class="rankList">
          <div
            class="rankItem"
            v-for="(it, i) in item.numbers"
            :key="i"
            :style="{
              backgroundColor: colors[it-1].bg,
              borderColor: colors[it-1].border,
            }"
          >
            {{ it }}
          </div>
        </div>
        <p class="money">{{ item.money }}</p>
      </div>
    </div>
  </div>
</template>

<style lang="scss" scoped>
@import url("./index.scss");
</style>
